<template>
    <div class="main">
      <header>

      </header>
      <section class="content">
        <div class="contentLeft">
          <div class="myCourse">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的选课</span>
              <hr/>
            </div>
          </div>
          <div class="myClassmate">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的同学</span>
              <hr/>
            </div>
          </div>
          <div class="myCostRecord">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的消费</span>
              <hr/>
            </div>
          </div>
        </div>
        <div class="contentRight">
          <div class="info" style="position:relative">
            <div class="photo" style="position: absolute;width:100px;height: 120px;top:10px;left:10px">
              <img :src="getImgUrl(drivers.dpicture)" style="width:100px;height: 120px;">
            </div>
            <ul class="infoUl" style="position: absolute;top:10px;left:114px; width:186px;">
              <li><span>主键：</span><span>{{drivers.did}}</span></li>
              <li><span>姓名：</span><span>{{drivers.dname}}</span></li>
              <li><span>电话：</span><span>{{drivers.dphone}}</span></li>
              <li><span>保险时间：</span><span>{{drivers.accident}}</span></li>
              <li><span>审核时间：</span><span>{{drivers.audittime}}</span></li>
              <li><span>图片路径：</span><span>{{drivers.dpicture}}</span></li>
            </ul>
          </div>
          <div class="myTeachers">
            <div class="frontTitle" style="width:90%;position: relative">
              <span>我的老师</span>
              <hr/>
            </div>
          </div>
        </div>
      </section>
      <footer>

      </footer>

    </div>
</template>

<script>
  import api from "../../../../axios/api"
  import * as fecha from "element-ui/lib/utils/date";
  import utilsFD from "../../../../static/js/utils/index.js"
    export default {
        name: "index",
        data(){
          return {
            drivers:{}
          }
        },
      methods:{
        //根据id查询学生信息
        getDriverByDid:function(){
          let _this = this;
          api.setDataFromAxios("/api/yunshuController/getDriverById/" + this.drivers.did,null,"get",null).then(
            dto=>{
              console.log(dto);
              _this.drivers = dto.t;
              //处理图片字段的地址 变成对应的file 对象 el-upload才能匹配显示
              if(this.drivers.dpicture!=null&&this.drivers.dpicture!=''){
                this.oldImg = true;
                let urls = this.drivers.dpicture.split(",");
              }
              this.drivers.accident = utilsFD.FD.Fd().dateFormatCN(this.drivers.daccident,'yyyy-MM-dd',fecha);
              this.drivers.audittime = utilsFD.FD.Fd().dateFormatCN(this.drivers.daudittime,'yyyy-MM-dd',fecha);
            }
          )
        },
        getImgUrl: function (dpicture) {
          //idea edit configuration deployement add external source
          return "/api/upload/head/" + dpicture;
        },
      },
      created() {
          this.drivers.did = '3';
          this.getDriverByDid();
      }
    }
</script>

<style scoped lang="stylus">
  div
    border solid 0px;
  .main
    font-family "微软雅黑"
    width 1000px;
    height auto;
    margin 0 auto;
    header
      height 40px;
    .content
      width 1004px;
      height 100%
      div
        float left;
      .frontTitle
        margin 0;
        color: white
        font-size 12px;
        height 24px;
        text-align left;
        span
          text-align center;
          vertical-align center;
          background-color #009af3
          display inline-block;
          width 70px;
          height 18px;
          margin 2px 0 2px 6px;
          border-radius 4px 4px 0 0;
        hr
          border-top 0;
          border-bottom solid 1px  #009af3;
          margin 0 0 0 6px;
          position absolute;
          bottom 3px;
          width 90%


      .contentLeft
        width 690px;
        height 660px;
        div
          margin-top 6px;
          width 100%
        .myCourse
          height 240px;
        .myClassmate
          height 220px;
        .myCostRecord
          height 320px;

      .contentRight
        margin-left 10px
        width 300px;
        height 300px;
        div
          width 100%
        .info
          height 258px
          .photo
            width
          .infoUl
            margin 0
            padding 0
            li
              font-size 12px
              list-style-type none
              text-align left
              padding-left 4px
              span
                display inline-block
                height 26px
                &:nth-child(1)
                  width 80px
        .myTeachers
          height  auto
    footer
      height 80px;
</style>
